<template>
    <div class="app-container">
        <div style="padding: 5px 0px">
            <toolbar :table="$refs.table" :moduleCode="$enums.moduleType.customer.value" @add="handleEdit"
                @delete="handleDelete" @refresh="handleRefresh" @export="handleExport" @import="handleImport"
                :buttons="['add', 'delete', 'export', 'import', 'log']">
                <template v-slot:search-slot>
                    <span style="padding-left: 5px">
                        <el-input v-model="filter.keyword" placeholder="请输入关键字" style="width: 200px" size="mini"
                            clearable></el-input>
                    </span>
                    <span style="padding-left: 5px"><el-button type="primary" size="mini"
                            @click="handleSearch">搜索</el-button></span>
                </template>
            </toolbar>
        </div>
        <div>
            <el-table :data="list" border fit highlight-current-row ref="table" size="small"
                @cell-dblclick="hanldeDbClick">
                <el-table-column type="selection" width="55"> </el-table-column>
                <el-table-column label="单据类型">
                    <template slot-scope="scope">
                        <type-label :documentType="scope.row.type"></type-label>
                    </template>
                </el-table-column>
                <el-table-column label="名称">
                    <template slot-scope="scope">
                        {{ scope.row.name }}
                    </template>
                </el-table-column>
                <el-table-column label="前缀">
                    <template slot-scope="scope">
                        {{ scope.row.prefix }}
                    </template>
                </el-table-column>
                <el-table-column label="流水长度">
                    <template slot-scope="scope">
                        {{ scope.row.flowLength }}
                    </template>
                </el-table-column>
                <el-table-column label="默认">
                    <template slot-scope="scope">
                        <el-tag type="danger" v-if="scope.row.isDefault">是</el-tag>
                        <el-tag type="danger" v-if="!scope.row.isDefault">否</el-tag>
                    </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click="handleEdit(scope.row.id)">{{ $t("common.edit")
                            }}</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div style="float: right">
            <el-pagination @size-change="handleSizeChange" @current-change="handlePageChange"
                :current-page.sync="filter.pageIndex" :page-sizes="[10, 20, 50, 100, 200, 500]"
                :page-size.sync="filter.pageSize" :prev-click="handlePrePage" :next-click="handleNextPage"
                layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>
        <el-drawer direction="rtl" :visible.sync="editDrawer" :with-header="false">
            <div v-if="editDrawer">
                <edit :id.sync="currentId" @refresh="hanldeEditRefresh"></edit>
            </div>
        </el-drawer>
        <el-drawer direction="rtl" :visible.sync="importDrawer" :with-header="false" style="overflow: auto">
            <div v-if="importDrawer">
                <importPanel :moduleCode="$enums.moduleType.customer.value"></importPanel>
            </div>
        </el-drawer>
        <export-panel v-show="false" ref="export" :moduleCode="$enums.moduleType.customer.value"></export-panel>
    </div>
</template>

<script>
import toolbar from "@/components/Bar/toolbar.vue";
import edit from "./edit.vue";
import { getNumberRules, deleteNumberRule } from "@/api/numberRule";
import importPanel from "@/components/Import/index.vue";
import exportPanel from "@/components/Export/index.vue";
import typeLabel from "@/components/Label/documentTypeLabel.vue"
export default {
    components: {
        toolbar,
        edit,
        importPanel,
        exportPanel,
        typeLabel
    },
    data() {
        return {
            list: null,
            filter: {
                pageIndex: 1,
                pageSize: 10,
                keyword: "",
                type: null,
            },
            editDrawer: false,
            currentId: "",
            total: 0,
            importDrawer: false,
        };
    },
    mounted() {
        this.getData();
    },
    methods: {
        getData() {
            getNumberRules(this.filter).then((res) => {
                res = res || { totalCount: 0, items: [] };
                this.total = res.totalCount;
                this.list = res.items;
            });
        },
        handlePageChange(pageIndex) {
            this.filter.pageIndex = pageIndex;
            this.getData();
        },
        handleSizeChange(pageSize) {
            this.filter.pageSize = pageSize;
            this.getData();
        },
        handlePrePage(currentPageIndex) {
            this.filter.pageIndex = currentPageIndex - 1;
        },
        handleNextPage(currentPageIndex) {
            this.filter.pageIndex = currentPageIndex + 1;
        },
        handleEdit(id) {
            this.editDrawer = true;
            this.currentId = id;
        },
        handleDelete({ ids }) {
            if (!ids || ids.length == 0) return;
            for (let i = 0; i < ids.length; i++) {
                deleteNumberRule(ids[i]).then((res) => {
                    if (i == ids.length - 1) {
                        this.$notify({
                            title: "成功",
                            message: "删除成功",
                            type: "success",
                            position: "bottom-right",
                        });
                        this.getData();
                    }
                });
            }
        },
        handleRefresh() {
            this.pageIndex = 1;
            this.pageSize = 10;
            this.getData();
        },
        hanldeEditRefresh() {
            this.editDrawer = false;
            this.getData();
        },
        hanldeDbClick(row) {
            this.currentId = row.id;
            this.editDrawer = true;
        },
        handleSearch() {
            this.handleRefresh();
        },
        handleExport() {
            this.$refs.export.exportData();
        },
        handleImport() {
            this.importDrawer = true;
        },
    },
    computed: {},
};
</script>